<template>
  <div class="parent">
    <img
      src="./assets/logo.png"
      :style="{
        position: 'absolute',
        width: `${item.width}px`,
        height: `${item.height}px`,
        top: `${item.top}px`,
        left: `${item.left}px`,
        transform: `rotate(${item.angle}deg)`,
      }"
      @click="active = true"
    />
    <DraggableContainer>
      <Vue3DragResizeRotate
        :initW="100"
        :initH="100"
        v-model:active="active"
        v-model:x="item.left"
        v-model:y="item.top"
        v-model:w="item.width"
        v-model:h="item.height"
        v-model:angle="item.angle"
      ></Vue3DragResizeRotate>
    </DraggableContainer>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import Vue3DragResizeRotate from './components/Vue3DragResizeRotate'
  import DraggableContainer from './components/DraggableContainer'
  const active = ref(true)
  const item = ref({
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    angle: 0,
  })
  const list = ref([])
  console.log(list.value)
</script>

<style lang="less">
  html,
  body {
    width: 3000px;
    height: 3000px;
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
  .parent {
    position: absolute;
    top: 100px;
    left: 100px;
    height: 640px;
    width: 360px;
    background: #f7f7f7;
    .container {
      height: 100%;
      width: 100%;
      background: rgb(160, 114, 233);
    }
  }
</style>
